<template>
  <div
    v-if="info"
    class="detail-wrap"
    :style="{ background: info.backgroundColor }"
  >
    <div class="title">猫眼电影 &gt; {{ info.nm }}</div>

    <!-- 详情信息 -->
    <div class="movie-info">
      <div class="info-img">
        <img :src="info.img" alt="" />
      </div>
      <div class="info-right">
        <h2>{{ info.nm }}</h2>
        <p class="info-p">{{ info.enm }}</p>
        <p class="info-p">{{ info.cat }}</p>
        <p class="info-p">{{ info.star }}</p>
        <p class="info-p">{{ info.pubDesc }} {{ info.dur }}</p>

        <div class="button-group">
          <div class="button">想看</div>
          <div class="button">看过</div>
        </div>
      </div>
    </div>

    <!-- 观众评分 -->
    <div class="score">
      <div class="top">
        <span>
          <img
            src="//obj.pipi.cn/festatic/asgard/resources/images/movie/logo-new.png"
            alt=""
          />
          <span>猫眼购票评分</span>
        </span>
        <span>{{ info.wish }}人想看 {{ info.watched }}人看过</span>
      </div>
      <div class="middle">
        <div class="middle-left">
          <span class="sc">{{ info.sc }}</span>
          <span class="people-grade">{{ info.snum }}人评</span>
        </div>
        <div class="middle-right">
          <div v-for="item in info.distributions" class="process">
            <div :style="{ width: item.proportion + '%' }"></div>
          </div>
        </div>
      </div>
      <div class="bottom">{{ info.scm }}</div>
    </div>

    <!-- 简介 -->
    <div class="introduction">
      <div class="introduction-title">
        <span>简介</span>
        <span @click="hasDra = !hasDra">{{ hasDra ? "展开" : "收起" }}</span>
      </div>
      <p :class="{ dra: hasDra }">{{ info.dra }}</p>
    </div>

    <!-- 剧照 -->
    <div class="photos">
      <button @click="fn">猜你喜欢</button>
      <input type="text" />
      <button @click="done = true">提交</button>
    </div>

    <div class="footer"></div>
  </div>

  <!-- 传统的方式可以通过添加“加载中”的方案来提高用户体验 -->
  <div v-else>加载中...</div>
</template>

<script>
// import NProgress from "nprogress";

export default {
  data() {
    return {
      info: null,
      hasDra: true,

      done: false,
    };
  },
  methods: {
    fn() {
      this.$router.push("/detail/1500600");
    },
    getData(id) {
      fetch("http://118.24.239.63:3000/api/detail/info", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: id || this.$route.params.id,
        }),
      })
        .then((response) => response.json())
        .then((res) => {
          console.log(res);
          this.info = res.data;
        });
    },
  },
  watch: {
    $route() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },

  beforeCreate() {
    console.log("beforeCreate");
  },
  // 路由提供的三个组件内守卫
  // beforeRouteEnter(to, from, next) {
  //   // next();
  //   // 在渲染该组件的对应路由被验证前调用
  //   // 不能获取组件实例 `this` ！
  //   // 因为当守卫执行时，组件实例还没被创建！
  //   // console.log("beforeRouteEnter", this);
  //   NProgress.start();
  //   fetch("http://118.24.239.63:3000/api/detail/info", {
  //     method: "POST",
  //     headers: {
  //       "Content-Type": "application/json",
  //     },
  //     body: JSON.stringify({
  //       id: to.params.id,
  //     }),
  //   })
  //     .then((response) => response.json())
  //     .then((res) => {
  //       NProgress.done();
  //       console.log(res);
  //       next((vm) => {
  //         vm.info = res.data;
  //       });
  //     });
  // },
  // beforeRouteUpdate(to, from, next) {
  //   // 在当前路由改变，但是该组件被复用时调用
  //   // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  //   // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //   // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  //   // console.log("beforeRouteUpdate");
  //   this.getData(to.params.id);
  // },
  beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    // console.log("beforeRouteLeave");
    // next(false);
    // const answer = window.confirm(
    //   "Do you really want to leave? you have unsaved changes!"
    // );
    // if (!answer) {
    //   next(false);
    // } else {
    //   next();
    // }

    if (this.done) {
      next();
    } else {
      const answer = window.confirm("表单还没有提交，是否要离开?");
      if (!answer) {
        next(false);
      } else {
        next();
      }
    }
  },
};
</script>

<style lang="less" scoped>
#nprogress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100% !important;
}

#nprogress .bar {
  height: 5px !important;
  background: blue;
}

.detail-wrap {
  padding: 16px;
  color: #ccc;

  .title {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .movie-info {
    width: 343px;
    height: 143px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    .info-img {
      width: 100px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .info-right {
      width: 231px;

      h2 {
        color: #fff;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .info-p {
        font-size: 12px;
        width: 100%;
        .ell();
        margin: 6px 0;
      }

      .button-group {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: space-between;

        .button {
          width: 110px;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.35);
          .center();
          font-size: 14px;
          color: #fff;
          border-radius: 4px;
        }
      }
    }
  }

  .score {
    width: 343px;
    height: 130px;
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 9px 10px 10px 0;

    .top {
      height: 18px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      img {
        width: 15px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .middle {
      height: 44px;
      margin: 11px 0 3px;
      display: flex;

      .middle-left {
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .sc {
          font-size: 22px;
          color: rgb(255, 180, 0);
          font-weight: 900;
        }
        .people-grade {
          font-size: 12px;
        }
      }
      .middle-right {
        flex: 1;

        .process {
          width: 100px;
          height: 10px;
          background-color: rgba(255, 255, 255, 0.06);
          position: relative;
          margin: 3px;

          div {
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
    .bottom {
      height: 28px;
      margin-top: 7px;
      font-size: 14px;
      color: #fff;
      line-height: 28px;
    }
  }

  .introduction {
    width: 343px;
    margin-bottom: 15px;

    .introduction-title {
      width: 100%;
      height: 22.5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #fff;

      span:nth-child(2) {
        font-size: 10px;
      }
    }

    p {
      color: #fff;
      font-size: 15px;
      line-height: 26px;
      margin-top: 6px;
    }
    .dra {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .photos {
    width: 343px;
    height: 132.5px;
    background-color: cornflowerblue;
  }

  .footer {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-top: 1px solid @border-color;
    bottom: 0;
    left: 0;
  }
}
</style>
